<template>
  <div class="editPorint">
    <editTool v-if="!modelEdit">
      <div class="edite-left">
        <div class="header-text">设备标注</div>
        <div class="edit-box">
          <div
            class="edit-item"
            v-for="(item, index) in editeList"
            @click="changeEdit(item)"
          >
            <img :src="item.icon" alt="" class="itemIcon" />
            <div class="item-text">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </editTool>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, toRefs } from "vue";
import editTool from "./components/edit-tool.vue";
import { requireImgUrl } from "@/utils/localurl/metaUrl";
import { UseModel } from "@/stores/model";
import { UseLocation } from "@/stores/location";
import { useLocationEq } from "@/stores/getEqByLocation";
const props = defineProps({
  isZoom: {
    type: Boolean,
    default: false,
  },
});
const { isZoom } = toRefs(props);
const emit = defineEmits(["selectType"]);
const { setEqData } = useLocationEq();
const model = UseModel();
const editeList = ref([
  {
    name: "枪机北",
    icon: requireImgUrl("image/dashboard/eqIcon/online", "枪机北"),
    ico: "url(static.ico),auto",
    type: "监控设备",
    model: "枪机",
    direction: "up",
  },
  {
    name: "枪机东",
    icon: requireImgUrl("image/dashboard/eqIcon/online", "枪机东"),
    ico: "url(static.ico),auto",
    type: "监控设备",
    model: "枪机",
    direction: "right",
  },
  {
    name: "枪机南",
    icon: requireImgUrl("image/dashboard/eqIcon/online", "枪机南"),
    ico: "url(static.ico),auto",
    type: "监控设备",
    model: "枪机",
    direction: "down",
  },
  {
    name: "枪机西",
    icon: requireImgUrl("image/dashboard/eqIcon/online", "枪机西"),
    ico: "url(static.ico),auto",
    type: "监控设备",
    model: "枪机",
    direction: "left",
  },
  {
    name: "广播设备",
    icon: requireImgUrl("image/dashboard", "广播点位"),
    ico: "url(广播点位.ico),auto",
    type: "广播设备",
  },
  {
    name: "球机",
    icon: requireImgUrl("image/dashboard", "球机"),
    ico: "url(球机点位.ico),auto",
    type: "监控设备",
    model: "球机",
  },
  {
    name: "鹰眼",
    icon: requireImgUrl("image/dashboard", "鹰眼"),
    ico: "url(鹰眼点位.ico),auto",
    type: "监控设备",
    model: "鹰眼",
  },
]);
const modelEdit = computed(() => {
  return model.$state.edit;
});
const locationId = computed(() => {
  return UseLocation().$state.LocationIndex;
});
const changeEdit = async (item) => {
  // let locationCode = UseLocation().$state.locationArr[locationId.value].code;
  let locationCode = 'LOCATION_01';
  let eqmodel = "";
  let obj = {};
  let type = item.type;
  let direction = "";
  if (item.type === "广播设备") {
    obj = { regionCode: locationCode, type: type };
  } else {
    obj = { regionCode: locationCode, type: type, model: item.model };
    eqmodel = item.model;
  }

  if (eqmodel == "枪机") {
    console.log(item.direction, "方向");

    direction = item.direction;
  }
  // await setEqData(obj);
  var body = document.querySelector("body");
  body.style.cursor = item.ico;
  model.Setedit(true);
  // emit("selectType", type, eqmodel, direction);
};
</script>

<style scoped lang="scss">
.edite-left {
  width: 100%;
  height: 100%;

  .header-text {
    color: #ffffff;
    text-align: center;
  }

  .edit-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;

    .edit-item {
      cursor: pointer;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #bfbfbf;
      margin-top: 10px;
      font-size: clamp(0.75rem, 0.63vw, 1.5rem);
      margin-bottom: 10px;
      width: 100%;
      padding: clamp(0.938rem, 0.78vw, 1.875rem) 0;
      box-sizing: border-box;

      &:hover {
        border: 1px solid #26beff;
      }
    }
  }
}
</style>
